<template>
  <nut-wrapper>
    <view class="feedback-container">
      <!-- 常见问题部分 -->
      <view class="section">
        <view class="section-title">
          <i class="iconfont icon-bangzhu" style="font-size: 20px"></i>
          <text>常见问题</text>
        </view>
        <nut-collapse v-model:active="activeNames">
          <nut-collapse-item
            :title="item.title"
            :name="index"
            v-for="(item, index) in faqList"
            :key="index"
          >
            {{ item.content }}
          </nut-collapse-item>
        </nut-collapse>
      </view>

      <!-- 问题反馈表单 -->
      <view class="section">
        <view class="section-title">
          <i class="iconfont icon-wentifankui" style="font-size: 20px"></i>
          <text>问题反馈</text>
        </view>
        <nut-form>
          <nut-form-item label="问题类型">
            <nut-radio-group v-model="feedbackForm.type" direction="horizontal">
              <nut-radio
                v-for="(item, index) in feedbackTypes"
                :key="index"
                :label="item"
              >
                {{ item }}
              </nut-radio>
            </nut-radio-group>
          </nut-form-item>

          <nut-form-item label="问题描述">
            <nut-textarea
              v-model="feedbackForm.content"
              placeholder="请详细描述您遇到的问题"
              maxlength="500"
              rows="4"
              limit-show
            />
          </nut-form-item>

          <nut-form-item label="上传截图">
            <nut-uploader
              v-model:file-list="feedbackForm.images"
              :max-count="3"
              :preview-size="80"
              @delete="onDelete"
              @oversize="onOversize"
            />
            <view class="upload-tips">最多上传3张图片，单张不超过5MB</view>
          </nut-form-item>

          <nut-form-item label="联系方式">
            <nut-input
              v-model="feedbackForm.contact"
              placeholder="请输入您的手机号或邮箱"
              type="text"
            />
          </nut-form-item>
        </nut-form>

        <view class="submit-btn">
          <nut-button
            type="primary"
            block
            @click="submitFeedback"
            :loading="submitting"
          >
            {{ submitting ? "提交中..." : "提交反馈" }}
          </nut-button>
        </view>
      </view>

      <!-- 其他联系方式 -->
      <view class="section contact-section">
        <view class="section-title">
          <i class="iconfont icon-contact" style="font-size: 20px"></i>
          <text>其他联系方式</text>
        </view>
        <view class="contact-list">
          <view class="contact-item">
            <i class="iconfont icon-dianhua" style="font-size: 24px"></i>
            <text class="label">客服电话：</text>
            <text class="value" @tap="makePhoneCall">400-888-8888</text>
          </view>
          <view class="contact-item">
            <i class="iconfont icon-youxiang" style="font-size: 24px"></i>
            <text class="label">客服邮箱：</text>
            <text class="value">support@example.com</text>
          </view>
          <view class="contact-item">
            <i class="iconfont icon-weixin" style="font-size: 24px"></i>
            <text class="label">微信客服：</text>
            <text class="value">customer_service</text>
          </view>
        </view>
      </view>
    </view>
  </nut-wrapper>
</template>

<script>
import Taro from "@tarojs/taro";

export default {
  name: "Feedback",
  data() {
    return {
      activeNames: ["0"],
      submitting: false,
      feedbackForm: {
        type: "功能异常",
        content: "",
        images: [],
        contact: "",
      },
      feedbackTypes: ["功能异常", "体验问题", "产品建议", "其他"],
      faqList: [
        {
          title: "如何修改密码？",
          content: '您可以在"设置-账号安全-修改密码"中修改您的登录密码。',
        },
        {
          title: "如何解绑手机号？",
          content: "请联系客服人员协助您解绑手机号。",
        },
        {
          title: "忘记密码怎么办？",
          content: '您可以通过"登录-忘记密码"，使用手机号或邮箱进行密码重置。',
        },
        {
          title: "如何注销账号？",
          content: "账号注销请联系客服处理，注销后数据将无法恢复，请谨慎操作。",
        },
      ],
    };
  },
  methods: {
    goBack() {
      Taro.navigateBack();
    },
    onDelete(file, index) {
      this.feedbackForm.images.splice(index, 1);
    },
    onOversize(files) {
      Taro.showToast({
        title: "图片大小不能超过5MB",
        icon: "none",
      });
    },
    makePhoneCall() {
      Taro.makePhoneCall({
        phoneNumber: "4008888888",
      });
    },
    async submitFeedback() {
      if (!this.feedbackForm.content.trim()) {
        Taro.showToast({
          title: "请描述您遇到的问题",
          icon: "none",
        });
        return;
      }

      this.submitting = true;

      // 模拟提交
      setTimeout(() => {
        Taro.showToast({
          title: "提交成功",
          icon: "success",
        });
        this.feedbackForm = {
          type: "功能异常",
          content: "",
          images: [],
          contact: "",
        };
        this.submitting = false;
      }, 1500);
    },
  },
};
</script>

<style lang="scss">
.feedback-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 40rpx;

  .section {
    margin: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;

      i {
        margin-right: 10rpx;
        color: $primary-color;
      }
    }
  }

  :deep(.nut-collapse-item) {
    .nut-collapse-item__title {
      font-size: 28rpx;
      color: #333;
    }

    .nut-collapse-item__content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      padding: 20rpx 30rpx;
    }
  }

  :deep(.nut-form-item) {
    margin-bottom: 30rpx;

    .nut-form-item__label {
      font-size: 28rpx;
      color: #333;
      width: 160rpx;
    }

    .nut-radio {
      margin-right: 40rpx;
      font-size: 26rpx;
    }

    .nut-textarea {
      background-color: #f8f8f8;
      border-radius: 8rpx;
      padding: 20rpx;
    }
  }

  .upload-tips {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }

  .submit-btn {
    margin-top: 60rpx;
  }

  .contact-section {
    .contact-list {
      .contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        &:last-child {
          margin-bottom: 0;
        }

        i {
          color: $primary-color;
          margin-right: 20rpx;
        }

        .label {
          font-size: 28rpx;
          color: #333;
        }

        .value {
          font-size: 28rpx;
          color: $primary-color;
        }
      }
    }
  }
}
</style>
